<template>
  <div class="page-container">
	<!--工具栏-->
	<div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
		<el-form :inline="true" :model="filters" :size="size">
			<el-form-item>
				<el-input v-model="filters.ywslh" placeholder="银行业务受理号"></el-input>
			</el-form-item>
			<el-form-item>
				<kt-button icon="fa fa-search" :label="$t('action.search')" perms="estate:todo:auth" type="primary" @click="findPage(null)"/>
			</el-form-item>
		</el-form>
	</div>
	
	<!--表格内容栏-->
	<todo-list-table 
		:height="350"  
		permsClaim="estate:todo:claim" 
		permsUnclaim="estate:todo:unclaim" 
		permsCommon="estate:todo:auth"
		permsView="estate:todo:view"
		:data="pageResult" 
		:columns="columns" 
		@findPage="findPage"
		@handleClaim="handleClaim" 
		@handleUnclaim="handleUnclaim"
		@handleDetail="handleDetail"
		@handleDiagram="handleDiagram">
	</todo-list-table>


	<!-- 查看业务详情界面对话框 -->
	<el-dialog title="查看业务详情" width="60%" :visible.sync="viewDetailDialogVisible" :close-on-click-modal="false">
		<el-container>
			<el-form :model="detailDataForm.slxx" label-width="150px" :rules="viewDetailDataFormRules" ref="detailDataForm.slxx" :size="size">
				<el-divider>受理信息</el-divider>
				<el-row :gutter="10">
					<el-col :span="8">
						<el-form-item label="银行业务受理号">
							<el-input v-model="detailDataForm.slxx.ywslh" readonly></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="区县代码">
							<el-input v-model="detailDataForm.slxx.qxdm" readonly></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="登记类型">
							<el-input v-model="detailDataForm.slxx.qxdm" readonly></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row :gutter="10">
					<el-col :span="8">
						<el-form-item label="受理人">
							<el-input v-model="detailDataForm.slxx.slr" readonly></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="受理时间">
							<el-input v-model="detailDataForm.slxx.slsj" readonly></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="咨询电话">
							<el-input v-model="detailDataForm.slxx.zxdh" readonly></el-input>
						</el-form-item>
					</el-col>
				</el-row>
 
 				<el-row :gutter="10">
					<el-col :span="6">
						<el-form-item label="短信联系人">
							<el-input v-model="detailDataForm.slxx.dxlxr" readonly></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="短信联系电话">
							<el-input v-model="detailDataForm.slxx.dxlxdh" readonly></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="提单人">
							<el-input v-model="detailDataForm.slxx.tdr" readonly></el-input>
						</el-form-item>
					</el-col>
						<el-col :span="6">
						<el-form-item label="提单时间">
							<el-input v-model="detailDataForm.slxx.tdsj" readonly></el-input>
						</el-form-item>
					</el-col>
				</el-row>			
			</el-form>
		</el-container>
	
		<el-container>
				<el-form :model="detailDataForm.dyqr" label-width="150px" :rules="viewDetailDataFormRules" ref="detailDataForm.dyqr" :size="size">
				<el-divider>抵押权人信息</el-divider>
				<el-row :gutter="10">
					<el-col :span="12">
						<el-form-item label="法人名称">
							<el-input v-model="detailDataForm.dyqr.frmc" readonly></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="法人电话">
							<el-input v-model="detailDataForm.dyqr.frdh" readonly></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row :gutter="10">
					<el-col :span="6">
						<el-form-item label="法人证件类型">
							<el-input v-model="detailDataForm.dyqr.frzjlx" readonly></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="法人证件号">
							<el-input v-model="detailDataForm.dyqr.frzjh" readonly></el-input>
						</el-form-item>
					</el-col> 
					<el-col :span="6">
						<el-form-item label="代理人电话">
							<el-input v-model="detailDataForm.dyqr.dlrdh" readonly></el-input>
						</el-form-item>
					</el-col> 
					<el-col :span="6">
						<el-form-item label="代理人证件号">
							<el-input v-model="detailDataForm.dyqr.dlrzjh" readonly></el-input>
						</el-form-item>
					</el-col>
				</el-row>
 
 				<el-row :gutter="10">
					<el-col :span="6">
						<el-form-item label="代理人名称">
							<el-input v-model="detailDataForm.dyqr.dlrmc" readonly></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="代理人证件类型">
							<el-input v-model="detailDataForm.dyqr.dlrzjlx" readonly></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="抵押权人名称">
							<el-input v-model="detailDataForm.dyqr.dyqrmc" readonly></el-input>
						</el-form-item>
					</el-col>
				</el-row>	

				<el-row :gutter="10">
					<el-col :span="6">
						<el-form-item label="权利人证件类型">
							<el-input v-model="detailDataForm.dyqr.qlrzjlx" readonly></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="权利人电话">
							<el-input v-model="detailDataForm.dyqr.qlrdh" readonly></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="权利人证件号">
							<el-input v-model="detailDataForm.dyqr.qlrzjh" readonly></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="权利人名称">
							<el-input v-model="detailDataForm.dyqr.qlrmc" readonly></el-input>
						</el-form-item>
					</el-col>
				</el-row>	

				<el-row :gutter="10">
					<el-col>
					<el-col :span="18">
						<el-form-item label="通讯地址">
							<el-input v-model="detailDataForm.dyqr.txdz" readonly></el-input>
						</el-form-item>
					</el-col>
					</el-col>
				</el-row>
			</el-form>
		</el-container>
			 
		<el-container>
			<el-form :model="detailDataForm.dyr" label-width="150px" :rules="viewDetailDataFormRules" ref="detailDataForm.dyr" :size="size">
				<el-divider>抵押人信息</el-divider>
				<el-row :gutter="10">
					<el-col :span="8">
						<el-form-item label="权利人名称">
							<el-input v-model="detailDataForm.dyr.qlrmc" readonly></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="证件类型">
							<el-input v-model="detailDataForm.dyr.zjlx" readonly></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="证件号码">
							<el-input v-model="detailDataForm.dyr.zjhm" readonly></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row :gutter="10">
					<el-col :span="8">
						<el-form-item label="性别">
							<el-input v-model="detailDataForm.dyr.xb" readonly></el-input>
						</el-form-item>
					</el-col> 
					<el-col :span="8">
						<el-form-item label="单位性质">
							<el-input v-model="detailDataForm.dyr.dwxz" readonly></el-input>
						</el-form-item>
					</el-col> 
					<el-col :span="8">
						<el-form-item label="国籍">
							<el-input v-model="detailDataForm.dyr.gj" readonly></el-input>
						</el-form-item>
					</el-col>
				</el-row>
 
 				<el-row :gutter="10">
					<el-col :span="6">
						<el-form-item label="共有情况">
							<el-input v-model="detailDataForm.dyr.gyqk" readonly></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="不动产权证号">
							<el-input v-model="detailDataForm.dyr.bdcqzh" readonly></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="代理人名称">
							<el-input v-model="detailDataForm.dyr.dlrmc" readonly></el-input>
						</el-form-item>
					</el-col>
						<el-col :span="6">
						<el-form-item label="代理人电话">
							<el-input v-model="detailDataForm.dyr.dlrdh" readonly></el-input>
						</el-form-item>
					</el-col>
				</el-row>	

				<el-row :gutter="10">
					<el-col :span="6">
						<el-form-item label="代理人证件号">
							<el-input v-model="detailDataForm.dyr.dlrzjh" readonly></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="权利比例">
							<el-input v-model="detailDataForm.dyr.qlbl" readonly></el-input>
						</el-form-item>
					</el-col>
				</el-row>	
			</el-form>

		</el-container>
			
		<!-- 业务审批模块 -->
		<el-divider>业务审批</el-divider>
		<el-input
			type="textarea"
			:rows="3"
			placeholder="请输入内容"
			v-model="approveOpinion">
		</el-input>

		<div slot="footer" class="dialog-footer">
			<el-button :size="size" type="primary" @click.native="handleApprove(detailDataForm.slxx.ywslh)" :loading="editLoading">{{$t('action.approve')}}</el-button>
			<el-button :size="size" @click.native="editDialogVisible = false">{{$t('action.reject')}}</el-button>
		</div>
	</el-dialog>

	<!-- 查看流程图 -->
	<el-dialog title="查看流程图" width="60%" :visible.sync="viewDetailDiagramVisible" :close-on-click-modal="false">
		<div class="demo-image__preview">
		<el-image 
			style="width: 1000px; height: 600px"
			:src="'data:image/png;base64,'+ this.diagramBase64"
			fit="fill"
			:preview-src-list="srcList">
		</el-image>
	</div>
	</el-dialog>


  </div>
</template>

<script>
import TodoListTable from "@/views/Core/Estate/TodoListTable"
import KtButton from "@/views/Core/KtButton"
import { format } from "@/utils/datetime"
export default {
	components:{
		TodoListTable,
		KtButton
	},
	data() {
		return {
			businessList: [],

			size: 'small',
			filters: {
				ywslh: ''
			},
			columns: [ 
				{prop:"bt", label:"标题", minWidth:100, width:200}, 
				{prop:"bdcywslh", label:"不动产业务受理号", minWidth:100, width:150},
				{prop:"dqclhj", label:"当前处理环节", minWidth:100, width:200},
				{prop:"zwr", label:"债务人", minWidth:100, width:120},
				{prop:"slr", label:"提单人", minWidth:100}, 
				{prop:"slsj", label:"提单时间", minWidth:120,  width:200, formatter:this.dateFormat},
				{prop:"rlr", label:"认领人", minWidth:80}
			],
			pageRequest: { pageNum: 1, pageSize: 20 },
			pageResult: {},

			operation: false, // true:新增, false:编辑
			editDialogVisible: false, // 新增编辑界面是否显示
			editLoading: false,
			dataFormRules: {
				ywslh: [
					{ required: true, message: '请输入业务受理号', trigger: 'blur' }
				]
			},
			// 新增编辑界面数据
			dataForm: {
				id: 0,
				bt: '',         // 标题 
				bdcywslh: '',   // 不动产业务受理号visible
				dqclhj: 0,      // 当前处理环节
				zwr: '',        // 债务人
        slr: '',        // 提单人
				slsj:'',         // 提单时间
				rlr: ''
			},

			// 查看业务详情
			viewDetailDialogVisible: false,
			viewDetailDataFormRules: {
				shyj: [
					{ required: true, message: '请填写审核意见', trigger: 'blur' }
				]
			},
		
			detailDataForm: {
				slxx:{
					ywslh:"",
					qxdm:"",
					djlx:"",
					slr:"",
					slsj:"",
					zxdh:"",
					dxlxr:"",
					dxlxdh:"",
					tdr:"",
					tdsj:""
				},
				dyqr:{
						frdh:"",
						frmc:"",
						frzjlx:"",
						frzjh:"",
						dlrdh:"",
						dlrzjh:"",
						dlrmc:"",
						dlrzjlx:"",
						dyqrmc:"",
						qlrzjlx:"",
						qlrdh:"",
						qlrzjh:"",
						qlrmc:"",
						txdz:""
					},
				dyr:{
					qlrmc:"",
					zjlx:"",
					zjhm:"",
					xb:"",
					dwxz:"",
					gj:"",
					gyqk:"",
					bdcqzh:"",
					dlrmc:"",
					dlrdh:"",
					dlrzjh:"",
					qlbl:""
				}
			},
			approveOpinion: "经审核，同意",

			// 查看流程图变量
			viewDetailDiagramVisible: false,
			diagramBase64: "",
			url: '',
			srcList: []
		}
	},
	methods: {
		// 获取分页数据
		findPage: function (data) {
			if(data !== null) {
				this.pageRequest = data.pageRequest
			}
			this.pageRequest.columnFilters = {
				ywslh: {name:'ywslh', value:this.filters.ywslh},
				username: {name:'username', value: sessionStorage.getItem("user")},
			}
			
			this.businessList = []
			this.$api.dyywsl.queryTodoList(this.pageRequest).then((res) => {
				
				  const target = {};
				  res.data.content.forEach((item, index) => {
					  var business = {}
					  business.bt = item.ywslh + item.djlx
					  business.bdcywslh = item.ywslh
					  business.dqclhj = item.ruTask.name_
					  business.zwr = ''
					  business.slsj = item.slsj
					  business.slr = item.slr
					  business.taskid = item.ywslhInfo.taskId
					  business.rlr = item.ruTask.assignee
					  this.businessList.push(business)				  
				  }) 
				  this.pageResult.content = this.businessList

			}).then(data!=null?data.callback:'')
		},

		// 认领任务
		handleClaim: function (data) {
			this.handleBusiness("claim", data) 
      // this.findPage(this)
		},			
		// 归还任务
		handleUnclaim: function (data) {
			this.handleBusiness("unclaim", data) 
			// this.findPage(this)
		},
		// 认领及归还任务 
		handleBusiness(type, val) {
			var todobusiness = {}
			todobusiness.taskid = val.row.taskid
			todobusiness.type = type
			todobusiness.bdcywslh = val.row.bdcywslh
			this.$api.dyywsl.claimBusiness(todobusiness).then((res) => {
				if(res.code == 200) {
					this.$message({ message: '操作成功', type: 'success' })
				} else {
					this.$message({message: '操作失败, ' + res.msg, type: 'error'})
				}
				this.authLoading = false
			}).then(val!=null?val.callback:'')

		},
		// 查看流程图
		handleDiagram: function (data) {
			let params = new FormData();
    	params.append('processInstanceId', data.row.taskid);
			this.$api.dyywsl.getProcessDiagram(params).then((res)=>{
				if (res.code = '200') {
					this.diagramBase64 = res.msg;
					console.log(this.diagramBase64)
					// this.srcList.push(this.diagramBase64)
					this.viewDetailDiagramVisible = true
				} else {
					
				}
			}).then(data != null?data.callback:"")
		},
		// 查看业务详情
		handleDetail(val) {
			// var todobusiness = {}
			// todobusiness.bdcywslh = data.row.bdcywslh
			// this.$api.dyywsl.viewBusiness(todobusiness).then((res) => {
			// 	if(res.code == 200) {
			// 		this.$message({ message: '查看业务详情成功', type: 'success' })
			// 		this.detailDataForm = res.data
			// 		this.viewDetailDialogVisible = true
			// 	} else {
			// 		this.$message({message: '查看业务详情失败, ' + res.msg, type: 'error'})
			// 	}
			// }).then(data!=null?data.callback:'')

			this.$router.push({path: '/estate/todoList/DyBusinessDetail', query: {ywslh: val.row.bdcywslh}})

		},
		// 审批业务
		handleApprove: function (data) {
			  var formdata = new FormData()
				formdata.append('ywslh', data);
				formdata.append('approvedType', 'pass');
				this.$api.dyywsl.approveBusiness(formdata).then( (res) => {
					this.editLoading = false
					if(res.code == 200) {
						this.$message({ message: '操作成功', type: 'success' })
						this.dialogVisible = false
						this.$refs['dataForm'].resetFields()
					} else {
						this.$message({message: '操作失败, ' + res.msg, type: 'error'})
					}
					this.findPage(null)
				})
		},
		// 时间格式化
		dateFormat: function (row, column, cellValue, index){
			return format(row[column.property])
		}
	},
	mounted() {
		
	}
}
</script>

<style scoped>
.el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>